import mapboxgl from 'mapbox-gl';


l7PlotRef.current = new L7Plot('container', {
  map: {
    type: 'mapbox',
    // style: 'blank',
    center: [120.19382669582967, 30.258134],
    zoom: 3,
    pitch: 0,
    token: 'pk.eyJ1IjoiaHV2Z3VnIiwiYSI6ImNseXM0bGN0ZjBkb3oya3I0NHVkcjZtN2wifQ.vThy52QpRF4nWDuJA2z8EQ',
    // token: 'b3737530c9b6430b893cd672cf1b85e9',
  }})


  const renderLabelsMarker = (points: any) => {
    const backMap: any = l7PlotRef.current?.getMap();

    const iconBlue = 'poi-marker-default'; // 使用 Mapbox 内置的图标名称或者图标 URL
    const iconRed = 'poi-marker-red'; // 同样，根据 Mapbox 的图标要求进行调整


    // const iconBlue: AMap.LabelMarker.IconOptions = {
    //   type: 'image', // 图标类型，现阶段只支持 image 类型
    //   image: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', // 图片 url
    //   size: [30, 60], // 图片尺寸
    //   anchor: 'bottom-center', // 图片相对 position 的锚点，默认为 bottom-center
    // };
    // const iconRed: AMap.LabelMarker.IconOptions = {
    //   type: 'image', // 图标类型，现阶段只支持 image 类型
    //   image: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png', // 图片 url
    //   size: [30, 60], // 图片尺寸
    //   anchor: 'bottom-center', // 图片相对 position 的锚点，默认为 bottom-center
    // };
    // const icon2: AMap.LabelMarker.IconOptions = {
    //   type: 'image', // 图标类型，现阶段只支持 image 类型
    //   image: '', // 图片 url
    //   size: [30, 60], // 图片尺寸
    //   anchor: 'bottom-center', // 图片相对 position 的锚点，默认为 bottom-center
    // };

    const labelMarkers = [];

    for (let i = 0; i < points.length; i++) {
      const text: AMap.LabelMarker.TextOptions = {
        content: points[i].name, // 要展示的文字内容
        direction: 'right', // 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
        offset: [-8, -30], // 在 direction 基础上的偏移量
        style: {
          // 文字样式
          fontSize: 12, // 字体大小
          fontWeight: 'thin',
          fillColor: '#2D3132', // 字体颜色
          strokeColor: '#fff', // 描边颜色
          strokeWidth: 2, // 描边宽度
        },
      };

      const text2: AMap.LabelMarker.TextOptions = {
        content: `设备总数：${points[i].allCount} `, // 第二个文本内容
        direction: 'right',
        offset: [10, -40], // 修改偏移量以调整第二个文本的位置
        style: {
          fontSize: 12,
          fillColor: '#1890FF',
          strokeColor: '#fff',
          strokeWidth: 2,
        },
      };

      const text3Content = () => {
        const { toCount, peCount } = points[i];
        if (toCount && peCount) {
          return `设备超时：${toCount}  端口错误：${peCount}`;
        } else if (toCount && !peCount) {
          return `设备超时：${toCount}`;
        } else if (!toCount && peCount) {
          return `端口错误：${peCount}`;
        } else {
          return '';
        }
      };

      const text3: AMap.LabelMarker.TextOptions = {
        content: text3Content(),
        direction: 'right',
        offset: [10, -25], // 修改偏移量以调整第二个文本的位置
        style: {
          fontSize: 12,
          fillColor: '#ff0000',
          strokeColor: '#fff',
          strokeWidth: 2,
        },
      };

      const colorIcon = points[i].toCount > 0 || points[i].peCount > 0 ? iconRed : iconBlue;


      // // 创建一个HTML元素作为标注文字的容器
      var customLabel = document.createElement('div');
      customLabel.className = 'custom-label'; // 根据你的CSS类名来设置
      customLabel.style.position = 'absolute'; // 绝对定位
      customLabel.style.pointerEvents = 'none'; // 防止标注文字影响鼠标事件
      customLabel.innerHTML = `<img src="https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png" alt="Marker" className="custom-marker-image" /><h3>${points[i].name}</h3><p>设备总数：${points[i].allCount}</p><p>${text3Content()}</p>`;




      //  // 将标注文字的容器添加到DOM中

      //  var container = document.getElementById('container');
      //  if (container) {
      //    container.appendChild(customLabel);
      //  }


      // const labelMarker = new AMap.LabelMarker({
      //   position: points[i].lnglat,
      //   zIndex: 16,
      //   icon: colorIcon, // 将第一步创建的 icon 对象传给 icon 属性
      //   text: text, // 将第二步创建的 text 对象传给 text 属性
      // });
      // const labelMarker2 = new AMap.LabelMarker({
      //   position: points[i].lnglat,
      //   zIndex: 15,
      //   icon: icon2, // 将第一步创建的 icon 对象传给 icon 属性
      //   text: text2, // 将第二步创建的 text 对象传给 text 属性
      // });
      // const labelMarker3 = new AMap.LabelMarker({
      //   position: points[i].lnglat,
      //   zIndex: 14,
      //   icon: icon2, // 将第一步创建的 icon 对象传给 icon 属性
      //   text: text3, // 将第二步创建的 text 对象传给 text 属性
      // });

      // labelMarker.on('click', (e) => {
      //   console.log('clickLabelMarker----', e, extParam, pointsAreaMsg);
      //   setExtParam({ ...pointsAreaMsg, block: e.data.data.name });
      //   history.push({ pathname: '/devices/review' });
      // });

      // labelMarkers.push(labelMarker, labelMarker2, labelMarker3);
      const marker = new mapboxgl.Marker({
        color: points[i].toCount > 0 || points[i].peCount > 0 ? '#ff0000' : '#1890FF',
        scale: 0.5, // 设置图标大小
        anchor: 'bottom', // 设置图标锚点
        offset: [0, -10], // 设置图标偏移量
        // draggable: true, // 设置图标可拖动
        // element: customLabel, // 将自定义的HTML元素作为标记点
      })
        .setLngLat(points[i].lnglat)
        .setPopup(new mapboxgl.Popup({ offset: 25 }).setHTML(`<h3>${points[i].name}</h3><p>设备总数：${points[i].allCount}</p><p>${text3Content()}</p>`))
        .addTo(backMap); // 这里的 map 是你的 Mapbox 地图实例



      // 为每个标记点创建一个独立的updateLabelPosition函数
      const updateLabelPositionForMarker = (label, marker) => {
        return function () {
          var coordinates = marker.getLngLat(); // 获取标记点的经纬度
          var pos = backMap.project(coordinates); // 将经纬度转换为屏幕坐标
          label.style.left = `${pos.x}px`;
          label.style.top = `${pos.y}px`; // 根据需要调整Y坐标偏移量
        };
      };



      // 为当前标记点添加事件监听
      // backMap.on('load', updateLabelPositionForMarker(customLabel, marker));
      // backMap.on('move', updateLabelPositionForMarker(customLabel, marker));
      // backMap.on('zoom', updateLabelPositionForMarker(customLabel, marker));

    }

    // 定义一个函数来更新标注文字的位置
    function updateLabelPosition(label, marker) {
      var coordinates = marker.getLngLat();
      var pos = backMap.project(coordinates); // 将经纬度坐标转换为屏幕坐标
      label.style.left = `${pos.x}px`;
      label.style.top = `${pos.y}px`; // 根据需要调整Y坐标偏移量
    }


    // labelsLayerRef.current = new AMap.LabelsLayer({
    //   opacity: 0.8,
    //   zooms: [3, 20],
    //   zIndex: 1000,
    //   collision: false, // 该层内标注是否避让
    //   allowCollision: true, // 设置 allowCollision：true，可以让标注避让用户的标注
    // });

    // // 添加一个 labelMarker
    // labelsLayerRef.current.add(labelMarkers);

    // backMap.add(labelsLayerRef.current);
    // backMap.setFitView();
  };



import { useEffect, useRef } from 'react';

import mapboxgl from 'mapbox-gl';


const MapComponent = (props: any) => {
  const mapRef = useRef();


  let map = null;

  useEffect(() => {
    mapboxgl.accessToken = '申请的token';

     map = new mapboxgl.Map({
      container: 'tmap',
      style: 'mapbox://styles/mapbox/streets-v12',
      center: [12.550343, 55.665957],
      zoom: 8
    });

    new mapboxgl.Marker()
      .setLngLat([12.550343, 55.665957])
      .addTo(map);


    return () => map.remove();

  }, []);


  return <div id='tmap' ref={mapRef} style={{ width: '100%', height: '100%'}} />;
};

export default MapComponent;

const MapComponent = (props: any) => {
  const mapRef = useRef();


  let map = null;

  useEffect(() => {
    mapboxgl.accessToken = '申请的token';

     mapRef.current = new mapboxgl.Map({
      container: 'tmap',
      style: 'mapbox://styles/mapbox/streets-v12',
      center: [12.550343, 55.665957],
      zoom: 8
    });

    new mapboxgl.Marker()
      .setLngLat([12.550343, 55.665957])
      .addTo(mapRef.current);


    return () => mapRef.current.remove();

  }, []);


  return <div id='tmap' ref={mapRef} style={{ width: '100%', height: '100%'}} />;
};

export default MapComponent;

for(let i = 0; i < ProcessingInstruction.length; i++){
  var customLabel = document.createElement('div');
  customLabel.className = 'custom-label'; // 根据你的CSS类名来设置
  customLabel.style.position = 'absolute'; // 绝对定位
  customLabel.style.pointerEvents = 'none'; // 防止标注文字影响鼠标事件
  customLabel.innerHTML = `<img src="https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png" alt="Marker" className="custom-marker-image" /><h3>${points[i].name}</h3><p>设备总数：${points[i].allCount}</p><p>${text3Content()}</p>`;

  const htmlStr = `<h3>${points[i].name}</h3><p style="color: #1890FF; margin-bottom: 0px;">设备总数：${points[i].allCount}</p><p style="color: #ff0000; margin-bottom: 0px;">${text3Content()}</p>`;

  // 创建标记点
  const marker = new mapboxgl.Marker({
    element: customLabel, // 将自定义的HTML元素作为标记点
  })
    .setLngLat(points[i].lnglat)
    .setPopup(new mapboxgl.Popup({ offset: 25, }).setHTML(htmlStr))
    .addTo(backMap); // 这里的 map 是你的 Mapbox 地图实例


  mapMarkersRef.current.push(marker);
}


const renderLabelsMarker = (points: any) => {
  const backMap: any = l7PlotRef.current?.getMap();

  const iconBlue = 'poi-marker-default'; // 使用 Mapbox 内置的图标名称或者图标 URL
  const iconRed = 'poi-marker-red'; // 同样，根据 Mapbox 的图标要求进行调整


  for (let i = 0; i < points.length; i++) {
   
    const text3Content = () => {
      const { toCount, peCount } = points[i];
      if (toCount && peCount) {
        return `设备超时：${toCount}  端口错误：${peCount}`;
      } else if (toCount && !peCount) {
        return `设备超时：${toCount}`;
      } else if (!toCount && peCount) {
        return `端口错误：${peCount}`;
      } else {
        return '';
      }
    };



    const htmlStr = `<h3 >${points[i].name}</h3><p style="color: #1890FF; margin-bottom: 0px;">设备总数：${points[i].allCount}</p><p style="color: #ff0000; margin-bottom: 0px;">${text3Content()}</p>`;

    const popup = new mapboxgl.Popup({ offset: 25 }).setHTML(htmlStr);


    // 创建标记点
    const marker = new mapboxgl.Marker({
      color: points[i].toCount > 0 || points[i].peCount > 0 ? '#ff0000' : '#1890FF',
      
    })
      .setLngLat(points[i].lnglat)
      .setPopup(popup)
      .addTo(backMap); // 这里的 map 是你的 Mapbox 地图实例

    mapMarkersRef.current.push(marker);

  }

};
